---
title: Cursor+BrowerTools
description: 介绍如何通过 Cursor 集成 BrowerTools，实现自动化获取和分析浏览器错误日志的方法与实践
sidebar_position: 5
---

## 功能介绍

BrowserTools 为 AI 代码编辑器和代理提供了监控和与您的网络浏览器交互的能力，以实现高效的调试和更无缝的开发体验。

通过这个 MCP 服务器工具，您可以为 AI 代码编辑器和代理提供以下功能：

- 自动访问控制台日志和错误
- 访问网页发起的 API 网络请求/响应
- 截图功能，可选择自动粘贴到 Cursor
- 获取当前选择的页面 UI 元素

## 准备工作

在使用 BrowserTools 前，请确保完成以下准备：

1. 安装 Node.js 环境
2. 安装 Google Chrome 浏览器或其他基于 Chromium 的浏览器
3. 安装 MCP 客户端（如 Cursor、WindSurf 等）

## 安装步骤

1. **下载插件**
   
   下载 Chrome 扩展程序，通过以下链接获取最新版插件，并进行解压：
   
   [BrowserTools-1.2.0-extension.zip](https://wkq-img.oss-cn-chengdu.aliyuncs.com/BrowserTools-1.2.0-extension.zip)

2. **安装插件**
   
   - 打开浏览器扩展程序管理窗口
      ![](https://wkq-img.oss-cn-chengdu.aliyuncs.com/1747839562310.png)
   - 启用开发者模式
   - 点击"加载已解压的扩展程序"，选择刚刚解压的插件文件夹
     ![](https://wkq-img.oss-cn-chengdu.aliyuncs.com/1747839694998.png)
   
3. **设置 MCP**
   
   3.1 打开 Cursor 设置界面
   
   3.2 找到 MCP 配置项，点击 "Add new global Mcp Server"
       ![](https://wkq-img.oss-cn-chengdu.aliyuncs.com/1747839896718.png)
   
   3.3 添加如下配置代码：

   ```json
   {
     "mcpServers": {
       "browser-tools": {
         "command": "npx",
         "args": [
           "@agentdeskai/browser-tools-mcp@latest"
         ],
         "env": {
           "BROWSER_TOOLS_HOST": "127.0.0.1",
           "BROWSER_TOOLS_PORT": "3025"
         }
       }
     }
   }
   ```

   3.4 确认 MCP 服务器已连接。此时会看到 MCP 页面的绿色标识，表示已成功连接。

## 运行 BrowserTools 服务器

> 注意执行顺序！

1. 在 Cursor 中新建一个终端，运行以下命令启动 BrowserTools 服务端：

   ```bash
   npx @agentdeskai/browser-tools-server
   ```

2. 再新建一个终端，运行以下命令启动 MCP 服务：

   ```bash
   npx @agentdeskai/browser-tools-mcp
   ```

3. **注意：**
   - 这两个终端都不要关闭，必须保持运行状态。
   - 每次重新打开 Cursor 时，都需要重复上述操作。
   - 虽然目前流程稍显繁琐，但这是当前的最佳实践，后续有望进一步简化。

